<template>
  <div>
    <el-dialog
      v-model="centerDialogVisible"
      title="项目任务延期原因上报"
      width="50%"
      align-center
      class="dialogStyle"
    >
      <el-form
        :model="formInline"
        ref="formInlineRef"
        class="demo-form-inline"
        label-width="120px"
      >
        <el-row style="width: 100%">
          <el-col :span="12">
            <el-form-item label="项目集名称">
              <el-input
                v-model="formInline.projectSetName"
                disabled
                placeholder=""
              />
            </el-form-item>
            <el-form-item label="项目名称">
              <el-input
                v-model="formInline.projectName"
                disabled
                placeholder=""
              />
            </el-form-item>
            <el-form-item label="任务名称">
              <el-input
                v-model="formInline.projectTaskName"
                disabled
                placeholder=""
              />
            </el-form-item>
            <el-form-item label="工作细项">
              <el-input v-model="formInline.itemName" disabled placeholder="" />
            </el-form-item>
            <el-form-item label="任务计划时间">
              <el-input v-model="formInline.time" disabled placeholder="" />
            </el-form-item>
            <el-form-item label="上报部门">
              <el-input
                v-model="formInline.departmentName"
                disabled
                placeholder=""
              />
            </el-form-item>
            <el-form-item label="上报人">
              <el-input v-model="formInline.userName" disabled placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <h4 class="titke">延期情况说明</h4>
            <el-form-item
              label="审核部门"
              prop="auditDepartmentName"
              :required="strTye != '审核'"
              :rules="[
                { required: true, message: '请选择审核部门', trigger: 'change' },
              ]"
            >
              <el-select
                class="global-el-input"
                v-model="formInline.auditDepartmentName"
                placeholder="请选择"
                @change="departmenthange"
                v-if="strTye != '审核'"
              >
                <el-option
                  v-for="item in state.sectionOptions"
                  :key="item.departmentId"
                  :label="item.departmentName"
                  :value="item.departmentId"
                />
              </el-select>
              <el-input
                v-else
                v-model="formInline.auditDepartmentName"
                disabled
                placeholder=""
              />
            </el-form-item>
            <el-form-item
              label="审核人"
              prop="auditUserId"
              :required="strTye != '审核'"
              :rules="[
                { required: true, message: '请选择审核人', trigger: 'change' },
              ]"
            >
              <el-select
                class="global-el-input"
                v-model="formInline.auditUserId"
                placeholder="请选择"
                v-if="strTye != '审核'"
              >
                <el-option
                  v-for="item in state.userOptions"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                />
              </el-select>
              <el-input
                v-else
                v-model="formInline.auditUserName"
                disabled
                placeholder=""
              />
            </el-form-item>
            <el-form-item
              label="情况说明"
              prop="remark"
              :required="strTye != '审核'"
              :rules="[
                { required: true, message: '请输入情况说明', trigger: 'blur' },
              ]"
            >
              <el-input
                v-model="formInline.remark"
                type="textarea"
                :disabled="strTye == '审核'"
                placeholder=""
              />
            </el-form-item>
            <el-form-item
              prop="auditRemark"
              label="审核意见"
              v-if="strTye == '审核'"
              :rules="[
                { required: true, message: '请输入审核意见', trigger: 'blur' },
              ]"
            >
              <el-input
                v-model="formInline.auditRemark"
                type="textarea"
                placeholder=""
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer" v-if="strTye != '审核'">
          <el-button @click="subimit" class="button_view">发起延期说明</el-button>
          <el-button @click="centerDialogVisible = false" class="button_cancel2">
            返回
          </el-button>
        </span>
        <span class="dialog-footer" v-else>
          <el-button @click="examine(2)" class="button_view">审核通过</el-button>
          <el-button @click="examine(3)" class="button_cancel2"> 审核驳回 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import {
	ElDialog,
	ElForm,
	ElFormItem,
	ElRow,
	ElCol,
	ElMessage,
} from "element-plus";
import { projectTaskApi, department } from "@/api/project.js";
import {taskApi} from "@/api/investment";

let centerDialogVisible = ref(false);
const formInline = ref({
	user: "",
	region: "",
});
const state = reactive({
	sectionOptions: [],
	userOptions: [],
});

const formInlineRef = ref(null);
const emits = defineEmits(["refreshList"]);
const subimit = () => {
	formInlineRef.value.validate((valid) => {
		if (valid) {
			taskApi
				.saveLateReporting({
					itemId: formInline.value.itemId,
					auditUserId: formInline.value.auditUserId,
					remark: formInline.value.remark,
				})
				.then((res) => {
					if (res.code == 200) {
						centerDialogVisible.value = false;
						ElMessage.success("发起延期说明成功");
						emits("refreshList");
					}
				});
		}
	});
};

const examine = (status) => {
	formInlineRef.value.validate((valid) => {
		if (valid) {
			taskApi
				.saveLateReportingReview({
					itemId: formInline.value.itemId,
					auditUserId: formInline.value.auditUserId,
					auditRemark: formInline.value.auditRemark,
					status,
				})
				.then((res) => {
					if (res.code == 200) {
						centerDialogVisible.value = false;
						ElMessage.success("审核操作成功");
						emits("refreshList");
					}
				});
		}
	});
};

watch(
	() => centerDialogVisible.value,
	(val) => {
		if (!val) {
			formInline.value = {};
		}
	}
);
watch(
	() => formInline.value.auditDepartmentName,
	(val) => {
		if (val) {
			getUserByDepartment(val);
		}
	}
);

// 获取部门
const departmenthange = (e) => {
	console.log("---", e);
};
// 获取部门
const getAllDepartments = () => {
	department.getAllDepartments().then((res) => {
		if (res.code == 200) {
			state.sectionOptions = res?.data || [];
		}
	});
};

//通过部门ID获取人员
const getUserByDepartment = (id) => {
	department.getUserByDepartmentId(id).then((res) => {
		if (res.code == 200) {
			state.userOptions = res?.data || [];
		}
	});
};

const getAuditInfo = (id) => {
	taskApi.getLateReporting({itemId:id}).then((res) => {
		if (res.code == 200) {
			formInline.value = res.data;
			formInline.value.time =
				res.data.planStartTime + "至" + res.data.planEndTime;
		}
	});
};
const strTye = ref("");
const open = (row, type) => {
	strTye.value = type;
	centerDialogVisible.value = true;
	getAuditInfo(row.itemId);
};

onMounted(() => {
	getAllDepartments();
});
defineExpose({
	open,
});
</script>
<style lang="scss" scoped>

.el-form-item {
	width: 100% !important;
}

.titke {
	margin-left: 100px;
}
</style>
<style lang="scss" scoped>
@import '@/views/constructionProjectManage/static/dialog.scss';
</style>
